<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //vue2的响应式
        //源数据
        let person = {
            name:'jj'
        }
        //生成一个响应式对象
        let p ={};
        Object.defineProperty(p,'name',{
            // value:'jj',//新增属性的值
            // configurable:true,//新定义的属性默认为false 不能删除值
            // writable:true,//新定义的属性默认为false,不能重写值
            //如果设置set和get就能用 value和 writable
            get(){
                console.log('响应式读取get')
                return person.name
            },
            set(value){
                console.log('响应式修改set')
                person.name = value
            }, //无法捕获添加删除
        })
        // vue_3 代理实现响应式
        let people = {
            name:'jj',
            age:17
        }
        let proxy = new Proxy(people,{
            //读取某个属性时调用
            get(target,propName){//target为源数据,propName为属性
                console.log('有人读取了people身上的属性')
                // return target[propName]
                return Reflect.get(target,propName)//操作源对象
            },
            //修改或新增某个属性时调用
            set(target,propName,value){//value为修改的值
                console('刷新界面')
                // target[propName] = value;
                Reflect.set(target,propName)
            },
            //删除某个属性属性时调用
            deleteProperty(target,propName){ //删除
                // return delete target[propName] //如果删除成功则返回true
                return Reflect.deleteProperty(target,propName)
            },

        }); //proxy代理了 people，改了proxy的值改了people的值
         //Reflect反射，ecma 尝试把 Object的方法全移植到 Reflect反射上,比如以下代码，
         //优势：Object.defineProperty重复定义就会报错，Reflect就不会报错,有利于封装组件不然容易try catch嵌套
         let obj = {a:1,b:'2'}
         Reflect.set(obj,'a',3)//和 obj.a = 3 一样
         const x = Reflect.defineProperty(obj,'name',{
            get(){
                return 3
            }
         })
         Reflect.defineProperty(obj,'name',{
            get(){
                return 4
            }
         })
         console.log(x);//
    </script>
</body>
</html>